{% extends "base_generic.html" %}

{% block content %}
<div class="container mt-4">
  <header class="mb-4">
    <h1 class="display-4">📚 Local Library</h1>
    <p class="lead">
      Welcome to <em>LocalLibrary</em> — a simple Django project built from the 
      <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website" target="_blank">MDN Django tutorial</a>.
    </p>
    <p class="text-muted">
      This tutorial demonstrates how to create a Django skeleton website with models, views, templates, and more.
    </p>
  </header>

  <section class="mb-4">
    <h2 class="h4">📊 Library Statistics</h2>
    <ul class="list-group">
      <li class="list-group-item d-flex justify-content-between align-items-center">
        <strong>Books</strong>
        <span class="badge bg-primary rounded-pill">{{ num_books }}</span>
      </li>
      <li class="list-group-item d-flex justify-content-between align-items-center">
        <strong>Total Copies</strong>
        <span class="badge bg-secondary rounded-pill">{{ num_instances }}</span>
      </li>
      <li class="list-group-item d-flex justify-content-between align-items-center">
        <strong>Available Copies</strong>
        <span class="badge bg-success rounded-pill">{{ num_instances_available }}</span>
      </li>
      <li class="list-group-item d-flex justify-content-between align-items-center">
        <strong>Authors</strong>
        <span class="badge bg-info rounded-pill">{{ num_authors }}</span>
      </li>
    </ul>
  </section>

  <footer class="text-muted">
    <p class="mt-4">👁 You have visited this page <strong>{{ num_visits }}</strong> time{{ num_visits|pluralize }}.</p>
  </footer>
</div>
{% endblock %}